<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<title>设置样式页</title>
		<link href="../plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
		<link href="../css/animate.css" type="text/css" rel="stylesheet" />
		<link href="../css/common.css" type="text/css" rel="stylesheet" />
		<script src="../plugins/jquery/jquery.min.js"></script>
		<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
		<!--[if lt IE 9]>
		    <script src="../plugins/html5shiv/html5shiv.min.js"></script>
		    <script src="../plugins/respond/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container-fluid page-inner">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<div class="panel-group" id="setGroup">
					    <div class="panel panel-default">
					        <div class="panel-heading clearfix">
					            <h4 class="panel-title pull-left lineH_34">设置颜色</h4>
					            <div class="btn-group pull-right">
					            	<button class="btn btn-default" onclick="bk.initStyle()">还原</button>
					            	<button class="btn btn-default" onclick="bk.saveStyle()">保存</button>
					            </div>
					        </div>
					        <div id="setBcColor" class="panel-collapse collapse in">
					            <div class="panel-body">
					            	<div class="col-sm-6">
					            		<h5>背景颜色</h5>
					            		<div class="colorContent clearfix">
						            		<div data-for="bcColor" class="colorBlock bcColor"></div>
							            	<div data-for="bcColor" class="colorBlock bcColor"></div>
							            	<div data-for="bcColor" class="colorBlock bcColor"></div>
							            	<div data-for="bcColor" class="colorBlock bcColor"></div>
							            	<div data-for="bcColor" class="colorBlock bcColor"></div>
							            </div>	
						            	<div id="setBcSelfColor" class="self-list">
						            		<div class="self-list-item self-list-red">
												<div class="list-strip">
													<div class="list-progress"></div>
													<div class="list-slider"></div>
												</div>
												<input type="text" name="list-value-red" value="0" class="list-value" />
											</div>
											<div class="self-list-item self-list-green">
												<div class="list-strip">
													<div class="list-progress"></div>
													<div class="list-slider"></div>
												</div>
												<input type="text" name="list-value-green" value="0" class="list-value" />
											</div>
											<div class="self-list-item self-list-blue">
												<div class="list-strip">
													<div class="list-progress"></div>
													<div class="list-slider"></div>
												</div>
												<input type="text" name="list-value-blue" value="0" class="list-value" />
											</div>
						            	</div>
					            	</div>
					            	<div class="col-sm-6">
					            		<h5>字体颜色</h5>
					            		<div class="colorContent clearfix">
						            		<div data-for="textColor" class="colorBlock textColor"></div>
							            	<div data-for="textColor" class="colorBlock textColor"></div>
							            	<div data-for="textColor" class="colorBlock textColor"></div>
							            	<div data-for="textColor" class="colorBlock textColor"></div>
							            	<div data-for="textColor" class="colorBlock textColor"></div>
							            </div>	
						            	<div id="setTextSelfColor" class="self-list">
						            		<div class="self-list-item self-list-red">
												<div class="list-strip">
													<div class="list-progress"></div>
													<div class="list-slider"></div>
												</div>
												<input type="text" name="list-value-red" value="0" class="list-value" />
											</div>
											<div class="self-list-item self-list-green">
												<div class="list-strip">
													<div class="list-progress"></div>
													<div class="list-slider"></div>
												</div>
												<input type="text" name="list-value-green" value="0" class="list-value" />
											</div>
											<div class="self-list-item self-list-blue">
												<div class="list-strip">
													<div class="list-progress"></div>
													<div class="list-slider"></div>
												</div>
												<input type="text" name="list-value-blue" value="0" class="list-value" />
											</div>
						            	</div>
					            	</div>
					            </div>
					        </div>
					    </div>
					</div>    
				</div><!--col-md-12-->
			</div>
		</div>
		<div class="modal fade" id="infoModal">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">提示信息</h4>
		            </div>
		            <div class="modal-body"></div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		<script>
			var bk = {};
			bk.defaultBcColor = 'rgb(60,141,188)';
			bk.defaultTextColor = 'rgb(255,255,255)';
			bk.bcColor = localStorage.getItem('self-bc-color') || bk.defaultBcColor;
			bk.textColor = localStorage.getItem('self-text-color') || bk.defaultTextColor;
			
//			点击事件
			bk.colorBlockClick = function(){
				$('.colorContent').children('div').on('click',function(){
					var bcColor='',rgbValue='',rgbValueBegin = '',rgbValueEnd = '',selfLsistId,dataFor;
					if($(this).hasClass('active')) return;
					$(this).siblings().removeClass('active');
					$(this).addClass('active');
					dataFor = $(this).attr('data-for');
					selfLsistId = dataFor=="bcColor" ? "setBcSelfColor" : "setTextSelfColor";
					bcColor = $(this).css('background-color');
					rgbValueBegin = bcColor.indexOf('(')
					rgbValueEnd = bcColor.indexOf(')')
					rgbValue = bcColor.slice(rgbValueBegin+1,rgbValueEnd);
					rgbValue = rgbValue.split(',');
					$('#'+selfLsistId+' .list-value').each(function(index){
						$(this).val(rgbValue[index]);
						$(this).trigger('keyup');
					})
				})
			};
			
//			自定义颜色手柄拖动事件
			bk.moveSelfSlider = function(){
				$('.self-list .self-list-item').each(function(){
					$(this).find('.list-slider').on('mousedown touchstart',function(e){
						var clickX,screenPosX,clickErrorLeft,clickErrorRight, leftP,stripDivleftOffset,sliderBtnleftOffset,dragging,selfList,thisItem,stripDiv,progressDiv,sliderBtn,valueDiv,stripWidth,sliderBtnWidth;
						sliderBtn = $(this);
						thisItem = sliderBtn.parents('.self-list-item');
						selfList =thisItem.parent('.self-list');
						stripDiv   = thisItem.find(".list-strip");	
						progressDiv  = thisItem.find(".list-progress");	
						valueDiv = thisItem.find(".list-value");	
						sliderBtnWidth = sliderBtn.outerWidth();
						stripWidth  = stripDiv.outerWidth();
						stripDivleftOffset =  stripDiv.offset().left;
						sliderBtnleftOffset = sliderBtn.offset().left;	
						screenPosX = e.pageX || e.originalEvent.targetTouches[0].pageX;
						clickErrorLeft = screenPosX-sliderBtnleftOffset;
						clickErrorRight = sliderBtnWidth-(screenPosX-sliderBtnleftOffset);
						dragging   = true;
						$(document).on('mousemove touchmove',function(e){
							if (dragging) {
								clickX = e.pageX || e.originalEvent.targetTouches[0].pageX;			
								leftP = clickX-stripDivleftOffset;
								if(leftP<=clickErrorLeft){
									progressDiv.css('width',0);
									sliderBtn.css('left', 0);
									valueDiv.val(0);
								}else if(leftP>=stripWidth-clickErrorRight){
									progressDiv.css('width',stripWidth);
									sliderBtn.css('left', stripWidth-sliderBtnWidth);
									valueDiv.val(255);
								}else{
									progressDiv.css('width',leftP);
									sliderBtn.css('left', leftP-clickErrorLeft);
									valueDiv.val(Math.floor(255*(progressDiv.outerWidth()/stripWidth)));
								}
								bk.getSelfColor(selfList);
							}
						});
						$(document).on('mouseup touchend',function(e) {
						    dragging = false;
						    e.cancelBubble = true;
						})
					});
				});
			};
			
//          改变自定义颜色输入框值后颜色手柄移动事件	
			bk.moveSelfSlider2 = function(){
				$('.self-list .list-value').on('keyup',function(){
					var selfList,stripDiv,progressDiv,sliderBtn,stripWidth,progressWidth,sliderBtnWidth;
					selfList = $(this).parents('.self-list');
					stripDiv = $(this).parents('.self-list-item').find('.list-strip');
					progressDiv = stripDiv.find('.list-progress');
					sliderBtn = stripDiv.find('.list-slider');
					stripWidth = stripDiv.outerWidth();
					progressWidth = progressDiv.outerWidth();
					sliderBtnWidth = sliderBtn.outerWidth();
					var val = parseInt($(this).val().trim());
					if(isNaN(val) || parseInt(val)<0){
						val = 0;
						progressWidth= 0;
					}else if(parseInt(val)>255){
						val = 255;
						progressWidth= stripWidth;
					}
					$(this).val(val);
					val = val/255;
					val = val.toFixed(2);
					progressWidth = stripWidth*val;
					progressDiv.stop().animate({width:progressWidth},500);
					if(progressWidth+sliderBtnWidth>=stripWidth){
						sliderBtn.stop().animate({left:(stripWidth-sliderBtnWidth)},500);
					}else{
						sliderBtn.stop().animate({left:(progressWidth)},500);
					}
					$('.colorContent .colorBlock').removeClass('active');
					bk.getSelfColor(selfList);
				});
			};
			
//          改变自定义颜色输入框值
			bk.changeSelfValue = function(colorType,selfType){
				var startPos,endPos,rgbVal;
				startPos = colorType.indexOf('(')+1;
				endPos = colorType.indexOf(')');
				rgbVal = colorType.slice(startPos,endPos);
				rgbVal = rgbVal.split(',');
				$('#'+selfType+' .list-value').each(function(index){
					$(this).val(rgbVal[index]).trigger('keyup');
				})
			}

//          获取自定义颜色值
			bk.getSelfColor = function(selfList){
				var rgb = '';
				selfList.find('.self-list-item').each(function(index){
					if(index<2){
						rgb += $(this).find('.list-value').val()+',';
					}else{
						rgb += $(this).find('.list-value').val();
					}
				});
				bk.setColor(selfList,rgb);
			};
			
//          设置对应元素的颜色值
			bk.setColor = function(selfList,rgb){
				var id = selfList.attr('id');
				if(id == "setBcSelfColor" ){
					$(window.parent.document).find('.self-bc-color').css('background-color',('rgb('+rgb+')'));
					bk.bcColor = 'rgb('+rgb+')';
				}else if(id == "setTextSelfColor" ){
					$(window.parent.document).find('.self-text-color').css('color',('rgb('+rgb+')'));
					$(window.parent.document).find('.self-textbc-color').css('background-color',('rgb('+rgb+')'));
					$(window.parent.document).find('.self-border-color').css('border-color',('rgb('+rgb+')'));
					bk.textColor = 'rgb('+rgb+')';
				}
			};
			
//			保存样式
			bk.saveStyle = function(){
				if(bk.bcColor == bk.defaultBcColor && bk.textColor == bk.defaultTextColor){
					bk.infoModal('没有更改');
					return;
				}
				localStorage.setItem('self-bc-color',bk.bcColor);
				localStorage.setItem('self-text-color',bk.textColor);
				bk.infoModal('保存成功！')
			};   
			
//			提示模态框
			bk.infoModal = function(text){
				$('#infoModal .modal-body').html(text);
				$('#infoModal').modal('show');
				setTimeout(function(){
					$('#infoModal').modal('hide');
				},1200)
			};
			
//			还原样式
			bk.initStyle = function(){
				if(bk.bcColor == bk.defaultBcColor && bk.textColor == bk.defaultTextColor) return;
				$(window.parent.$('.self-bc-color')).css('background-color',bk.defaultBcColor);
				$(window.parent.$('.self-text-color')).css('color','#fff');
				$(window.parent.$('.self-border-color')).css('border-color',bk.defaultTextColor);
				bk.bcColor = bk.defaultBcColor;
				bk.textColor = bk.defaultTextColor;
				$('.colorContent .colorBlock').removeClass('active');
				bk.changeSelfValue(bk.bcColor,"setBcSelfColor");
				bk.changeSelfValue(bk.textColor,"setTextSelfColor");
				localStorage.clear();
				
			}
			$(function(){
				bk.colorBlockClick();
				bk.moveSelfSlider();
				bk.moveSelfSlider2();
				bk.changeSelfValue(bk.bcColor,"setBcSelfColor");
				bk.changeSelfValue(bk.textColor,"setTextSelfColor");
			})
		</script>
	</body>
</html>